<template>
  <div style="width:100%;height:100%;overflow: hidden;" class="login-wrap">
    <!---->
    <div id="canvasWrapper" ref="canvasWrapper" class="canvasWrapper">
      <canvas id="canvas" ref="canvas"></canvas>
    </div>
    <Row class="login_body" type="flex" align="middle" justify="center">
      <!--右上角登录，注册按钮-->
      <div class="color-fff" style="display:flex;width:100%;justify-content:flex-end;padding-right:170px;position:absolute;top:35px;z-index:50;">
        <div>
          <span @click.stop="userHandle('login')" class="pointer link-item">登录</span>
          <span>|</span>
          <span @click.stop="userHandle('register')" class="pointer link-item">注册</span>
        </div>
      </div>
      <!---->
      <Row type="flex" align="middle" justify="center" style="width:100%;">
        <img src="~@/assets/img/login/log.png" class="cur f-mAll20" style="position: fixed;top: 0;left: 0;" @click="openHome"/>
        <Row class="login_form" type="flex">
          <!--左边图片-->
          <iCol :span="14" class="left">
            <div class="animeWrapper">
              <img :src="loginSrc" alt="" class="bg-img-left"/>
            </div>
          </iCol>
          <!--右边登录-->
          <iCol :span="10" class="right">
            <!--登录智慧能源E管家-->
            <transition
              enter-active-class="animated flipInY"
              leave-active-class="animated flipOutY"
              :duration="durationLogin">
              <div v-show="!isRegister" class="login-form" :style="{'height':bgHeight}">
               
                <Row class="login_form_bg" type="flex" align="top" justify="center" v-show="showFlag">
                  <div class="app-download app-download1" @click="appClick">
                    <Tooltip content="点击下载APP" theme="light" placement="top">
                      <img src="~@/assets/img/login/app-download.png" alt />
                    </Tooltip>
                  </div>
                  <Row type="flex" justify="start" style="width: 380px;">
                    <h2 class="fs20 color-fff bold500 center h2Title_login" style="letter-spacing:2px;margin:0 auto;padding-top: 2%;">
                      欢迎登录智慧能源E管家
                    </h2>
                    <div class="login_type">
                      <Row type="flex" justify="space-around">
                        <Col span="6"><span :class="ismaShow?'bgImgSet':''" @click='loginType(1)'><i></i>密码登录</span></Col>
                        <Col span="6"><span :class="!ismaShow?'bgImgSet':''" @click='loginType(2)'><i></i>免密登录</span></Col>
                      </Row>
                    </div>
                    
                    <div v-show='ismaShow'  class="login-form">
                      <Input v-model="username" size="large" prefix="md-person" placeholder="请输入用户名/账号/手机号"
                        clearable style="margin:15px 0 15px 0;" ref="username" name="用户名" @on-enter="handleSubmit()"/>

                      <Input @on-change="udtpassword = false" v-model="password" size="large" prefix="md-lock" placeholder="请输入密码"
                        type="password" autocomplete="new-password" style="margin-bottom:15px;" clearable ref="password" name="密码" @on-enter="handleSubmit()"/>

                      <div class="validateCodeWrap">
                        <Input v-model="validateCode" size="large" prefix="ios-barcode" placeholder="请输入验证码" :maxlength="4"
                          type="text" clearable ref="validateCode" name="验证码" style="width: 200px" @on-enter="handleSubmit()"/>

                        <div class="validateCode">
                          <img :src="validateCodeImgURL" alt="点击刷新验证码" title="点击刷新验证码" @click="getValidateCode"/>
                        </div>
                      </div>
                      <div class="getPassword">
                        <span @click.stop="$router.push({ name: 'forgotAccount' })">忘记密码</span>&#160;
                        <!-- <span @click.stop="$router.push({ name: 'registered' })">立即注册</span> -->
                        <span @click.stop="userHandle('register')">立即注册</span>
                      </div>
                      <Button type="info" style="border:none; background:#0078ff;width:100%;height:45px;line-height:35px;padding:0;z-index: 999;"
                              @click="handleSubmit" :loading="!submitState">登 录</Button>
                    </div>
                    <div v-show='!ismaShow' class="login-form">
                      
                      
                      <Input
                        v-model="phone"
                        size="large"
                        prefix="md-phone-portrait"
                        placeholder="请输入手机号"
                        maxlength="11"
                        clearable
                        @on-change='phoneChange'
                        class="f-mb15 f-mt15 phone"
                      />
                      <Button v-if='vcodeText' type="success" class='vcode-btns' style='width:100%;height:47px' @click="onSubmit" long>点击按钮进行验证</Button>
                      <div v-else class="usvc1"></div>
                        <Vcode
                          :show="isShow"
                          @success="onSuccess"
                          
                        />
                      <div v-if='vCodeNumShow' class="verInput">
                        <Input
                          
                          v-model="verificationCode"
                          size="large"
                          maxlength="6"
                          placeholder="请输入验证码"
                          clearable
                          @on-blur='verCodeTrue'
                          @on-enter='verCodeTrue'
                          
                          style="width: 100%;"
                        ></Input>
                        <span v-if='disabled || timeNum > 0' class="append" style="cursor:not-allowed">{{codeText}}</span>
          <span v-else class="append" @click="startTimeFun">{{codeText}}</span>
                      </div>
                      <div class="getPassword">
                        <span @click.stop="$router.push({ name: 'forgotAccount' })">忘记密码</span>&#160;
                        <!-- <span @click.stop="$router.push({ name: 'registered' })">立即注册</span> -->
                        <span @click.stop="userHandle('register')">立即注册</span>
                      </div>
                      <Button type="info" class='sumitBtn'style=""
                              @click="phoneLogin" :loading="!submitState1">登 录</Button>
                    </div>
                  </Row>
                </Row>
                <Row class="login_form_bg" type="flex" align="top" justify="center" v-show="!showFlag">
                  <div class="app-download" @click="appClick">
                    <Tooltip content="点击返回登陆" theme="light" placement="top">
                      <img src="~@/assets/img/login/login-pc.png" alt />
                    </Tooltip>
                  </div>
                  <h2 class="fs20 f-pAll0 color-fff bold500 center" style="letter-spacing:2px;margin-top: 5%;">
                    扫一扫下载智慧能源APP
                  </h2>

                  <div class="code-style">
                    <div>
                      <vue-qr :logoSrc="logoSrc" text="https://zhny.hn.sgcc.com.cn/appdownload/android/index.html"
                        :margin="0" :size="180"></vue-qr>
                      <p class="color-fff f-pt10 center">Android版本下载</p>
                    </div>
                    <div>
                      <vue-qr :logoSrc="logoSrc" text="https://zhny.hn.sgcc.com.cn/appdownload/ios/index.html"
                         :margin="0" :size="180"></vue-qr>
                      <p class="color-fff f-pt10 center">ios版本下载</p>
                    </div>
                  </div>
                </Row>

              </div>
            </transition>

            <!--注册智慧能源E管家-->
            <transition
              enter-active-class="animated flipInY"
              leave-active-class="animated flipOutY"
              :duration="durationRegister">
              <div v-show="isRegister" class="register-form">
                <Row class="login_form_bg" type="flex" align="top" justify="center" v-show="showFlag">
                  <div class="app-download" @click="appClick">
                    <Tooltip content="点击下载APP" theme="light" placement="top">
                      <img src="~@/assets/img/login/app-download.png" alt />
                    </Tooltip>
                  </div>
                  <Row type="flex" justify="start" style="width: 380px;">
                    <h2 class="fs20 color-fff bold500 center h2Title" style="letter-spacing:2px;margin:0 auto;padding-top: 9px;">
                      注册智慧能源E管家
                    </h2>
                    <div class="register-form">
                      <registerForm v-if='isRegister' @login="userHandle('login')"></registerForm>
                    </div>
                  </Row>
                </Row>
                <Row class="login_form_bg" type="flex" align="top" justify="center" style='height: 400px;' v-if="!showFlag">
                  <div class="app-download" @click="appClick">
                    <Tooltip content="点击返回登陆" theme="light" placement="top">
                      <img src="~@/assets/img/login/login-pc.png" alt />
                    </Tooltip>
                  </div>
                  <h2 class="fs20 f-pAll0 color-fff bold500 center" style="letter-spacing:2px;margin-top: 5%;">
                    扫一扫下载智慧能源APP
                  </h2>

                  <div class="code-style">
                    <div>
                      <vue-qr :logoSrc="logoSrc" text="https://zhny.hn.sgcc.com.cn/appdownload/android/index.html"
                        :margin="0" :size="180"></vue-qr>
                      <p class="color-fff f-pt10 center">Android版本下载</p>
                    </div>
                    <div>
                      <vue-qr :logoSrc="logoSrc" text="https://zhny.hn.sgcc.com.cn/appdownload/ios/index.html"
                        :margin="0" :size="180"></vue-qr>
                      <p class="center color-fff f-pt10">ios版本下载</p>
                    </div>
                  </div>
                </Row>
              </div>
            </transition>
          </iCol>
        </Row>

        <!--footer-->
        <Row class="f-mAll20 color-fff center" style="position: fixed;bottom: 0;left: 0;width:100%;">
          ©2019 zhny.hn.sgcc.com.cn 国网湖南省电力有限公司版权所有
          京ICP备：17072407</Row>
      </Row>
    </Row>
  </div>
</template>

<script>
import { validateCodeImgURL,checkUser,getLoginCode, getRandomCodeForSMS } from "@/api/account.js";
import util from "@/libs/util.js";
import CryptoJS from "crypto-js";
import Store from "@/store";
import { mapActions } from "vuex";
import roMap from "@/router/overAllviewRoleMap";
import globalV from "@/libs/common/global.js";
import VueQr from "vue-qr";
import cs from "./cs";
import Vcode from "vue-puzzle-vcode";
export default {
  props:{
    isLogin:{
      type:Boolean,
      default: true
    }
  },
  components: {
    VueQr,
    Vcode,
    registerForm: () => import("@/pages/account/registerForm/register"),
  },
  data() {
    return {
      //随机验证码，用于手机验证码接口
      randomCode: "",
      isShow:false,
      vCodeNumShow:false,
      logoSrc: require("../../../assets/img/login/download-logo.png"),
      phone:"",
      vcodeText:true,
      verificationCode:"",
      ismaShow:true,
     
      showFlag: true,
      udtpassword: false,
      submitState: true,
      submitState1: true,
      phoneStandard: true,
      second: 60,
      timeNum: 0,
      rememberPassword: false,
      timeNum: 0,
      timeStamp: 0,
      timeStamp1: 0,
      disabled: false,
      second: 60,
      username: null,
      password: null,
      validateCode: "",
      validateCodeImgURL: "",
      aesKey: CryptoJS.enc.Utf8.parse("c9d2eea8faea11e996ed14ecd17545c4"),
      userPhone: "", //电话号码
      phoneCode: "", //验证码
      isRegister: false,//是否注册
      durationLogin: 0,
      durationRegister: 0,
      loginSrc:require('@/assets/img/login/img_left.png'),
    };
  },
  computed: {
    codeText: function() {
      return this.timeNum > 0 ? this.timeNum + "s 后重获取" : "获取验证码";
    },
     bgHeight:function(){
      if(this.ismaShow){
        return '470px'
      }else{
        if(this.vCodeNumShow){
          return '470px'
        }else{
          return '410px'
        }
      }
     },
  },
  mounted() {
    this.isRegister = !this.isLogin;
    this.getValidateCode();
    cs(this);
  },
  methods: {
    phoneChange(val){
      if(!this.vcodeText){
        this.vcodeText=true
        this.vCodeNumShow=false
        this.timeNum=0
        this.verificationCode=""
      }
    },
    loginType(val){
      if(val==1){
        this.ismaShow=true
        this.vcodeText=true
        this.vCodeNumShow=false
      }else{
        this.vcodeText=true
        this.ismaShow=false
        this.vCodeNumShow=false
      }
    },
    onSuccess(msg){
        
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
        let phone = CryptoJS.AES.encrypt(
          CryptoJS.enc.Utf8.parse(this.phone),
          this.aesKey,
          {
            mode: CryptoJS.mode.ECB,
          }
        ).toString();
        getRandomCodeForSMS({phone: phone}).then((res) => {
          if(res.code == 200){
            try{
              this.randomCode =  CryptoJS.AES.decrypt(res.result, this.aesKey, {mode: CryptoJS.mode.ECB}).toString(CryptoJS.enc.Utf8);
              this.vcodeText=false
              this.vCodeNumShow=true
            }catch(err){
              this.$Message.error("获取随机码出错！");
            }
          }else{
            this.$Message.error(res.message);
          }
        });
      },
    verCodeChange(){

    },
    phoneCahnge(){
      // this.vcodeText=false
      // this.verificationCode=null
      // this.timeNum=0
    },
    onSubmit(){
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$Message.error("手机号不可用");
        return;
      }
        this.isShow = true;
        let btn = document.querySelector(".vue-puzzle-vcode");
        
        btn.addEventListener('click',(event)=>{
          
          if(btn){
              if(event.target==btn){
                this.isShow=false
              }
          }
          
        })
     
      
    },
    startTimeFun() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$Message.error("手机号不可用");
        return;
      }
      if (!this.phoneStandard) {
        this.$Message.error("该手机号还未注册,请先注册");
        return;
      }

      let phone = CryptoJS.AES.encrypt(
        CryptoJS.enc.Utf8.parse(this.phone),
        this.aesKey,
        {
          mode: CryptoJS.mode.ECB,
        }
      ).toString();

      const timeStamp = new Date().getTime();
      this.timeStamp1 = timeStamp;

      getLoginCode({phone:phone, randomCode: this.randomCode}).then((res) => {
        if (res.code == 200) {
          this.$Message.success("验证码已发送");
          this.phoneReadonly = true;
          this.timeNum = this.second;
          this.timerFun();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    checkUser(val, type, standard) {
      if (val == "" || val == null) {
        return;
      }
      if (type == 2) {
        val = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(val), this.aesKey, {
          mode: CryptoJS.mode.ECB,
        }).toString();
      }
      checkUser({
        paramVlue: val,
        type: type,
      }).then((res) => {
        if (res.code == 500) {
          this[standard] = true;
          switch (type) {
            case 1:
              this.nameError = res.message;
              break;
            case 2:
              this.phoneError = res.message;
              break;
            case 3:
              this.emailError = res.message;
              break;
          }
        } else {
          this[standard] = false;
        }
      });
    },
    timerFun() {
      if (this.timeNum > 0) {
        this.timeNum--;
        setTimeout(this.timerFun, 1000);
      } else {
        this.disabled = false;
      }
    },
    //用户操作
    userHandle(type) {
      this.showFlag = true
      //注册
      if (type === "register") {
        this.durationLogin = 0;
        this.durationRegister = 1000;
        this.isRegister = true;
      }
      //登录
      else {
        this.durationLogin = 1000;
        this.durationRegister = 0;
        this.isRegister = false;
      }
    },
    openHome() {
      window.location = "https://zhny.hn.sgcc.com.cn/#/home";
    },
    appClick() {
      this.showFlag = !this.showFlag;
    },
    ...mapActions("admin/account", ["login"]),
    
    goPage() {
      this.$router.push("/outerLayout/registered");
    },
    // 获取验证码
    getValidateCode() {
      let timeStamp = new Date().getTime();
      this.timeStamp = timeStamp;
      this.validateCodeImgURL = validateCodeImgURL + "?time=" + timeStamp;
    },
    //加密密码
    encryptPwd(pwd) {
      return CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(pwd), this.aesKey, {
        mode: CryptoJS.mode.ECB,
      }).toString();
    },
    //初始化信息到store
    initInfoToStore(){
        // 获取登录客户信息
        this.$store.dispatch("admin/login/setUserInfo"); 
        //获取orgNoList
        this.$store.dispatch("admin/fourMenu/getOrgNoList");
        //获取功能权限
        this.$store.dispatch("admin/login/listMyFunctionCodes");
        //初始化orgNoList
        this.$store.dispatch("admin/fourMenu/getOrg");
        //初始化区域list
        this.$store.dispatch("admin/login/setAreaData");
        //获取智慧园区死数据
        this.$store.dispatch("admin/smart/getTableData");
    },
    //把手机号登录和账号登录的部分逻辑抽取出来
    initLogin(){
        this.$Message.success("欢迎登录智慧能源管理系统");
        this.$store.commit('admin/menu/clear');
        let token = util.token.initToken();
        globalV.userId = token.uid;
        localStorage.setItem("userId", token.uid);
        this.initInfoToStore();
        const firstFlag = token && token.firstLogin;
        if (firstFlag) {
          Store.commit("admin/login/CHECKFIRSTLOGIN", true);
          this.$router.push("/sysSetting/resetPassword");
          return;
        } else {
          Store.commit("admin/login/CHECKFIRSTLOGIN", false); // 非第一次登录
        }

        let returnUrl = this.$route.query.returnUrl;
        if (returnUrl) {
          returnUrl = decodeURIComponent(returnUrl);
          this.$router.push(returnUrl);
          return;
        }

        //用户已经登录，需要跳转到指定的全景页面
        let homePage = util.homePage.getHomePage();
        this.$router.push(homePage);
    },
    handleSubmit() {

      if (this.submitState) {
        this.submitState = false;
        if (
          util.validate.isNull([
            {
              title: "用户名",
              value: this.username,
            },
            {
              title: "密码",
              value: this.password,
            },
            {
              title: "验证码",
              value: this.validateCode,
            },
          ])
        ) {
          let password = this.password;
          if (!this.udtpassword) {
            password = this.encryptPwd(password);
          }

          this.login({
            username: this.username,
            password: password,
            code: this.validateCode,
            time: this.timeStamp, // 时间戳
            platform: 2, // 固定 平台类型
          }).then(
            (res) => {
              try {
                this.initLogin();
                this.submitState = true;
              } catch (error) {
                this.$Message.error(error);
                this.validateCode = null;
                this.submitState = true;
              }
            },
            (err) => {
              this.validateCode = null;
              this.$Message.error(err);
              this.getValidateCode();
              this.submitState = true;
            }
          );
        } else {
          this.submitState = true;
        }
      }
    },
    verCodeTrue(val){

    },
    phoneLogin(){
      if(this.submitState1){
        this.submitState1 = false;
        if (
          util.validate.isNull(
            [
              { title: "手机号", value: this.phone },
              { title: "验证码", value: this.verificationCode },
            ])
        ){
            
            let params={
              phone: this.phone,
              code: this.verificationCode,
              // time: this.timeStamp1, // 时间戳
              platform: 2, // 固定 平台类型
            }
            this.login(params).then(
              (res)=>{
                // console.log(111)
              try {
                this.initLogin();
                this.submitState1 = true;
              } catch (error) {
                this.$Message.error(error);
                this.verificationCode = null;
                this.submitState1 = true;
              }
            },
            (err) => {
              this.verificationCode = null;
              this.$Message.error(err);
              this.getValidateCode();
              this.submitState1 = true;
            })
        }else {
          this.submitState1 = true;
        }
      }
     
    },
    // 清除cookie
    clearCookie: function() {
      this.$cookie.set("access_token", "");
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
.pointer {
  cursor: pointer;
}
.usvc1{
  width: 100%;
  height: 47px;
 
  margin-bottom: 15px;
  background-image: url("~@/assets/img/login/suvs.png");
  background-size: 100% 100%;
}
.login_type{
  width: 100%;
  padding: 38px 0 9px;
  .ivu-col{
    text-align: center;
    .bgImgSet{
       border-bottom: 2px solid #0078ff;
       color:#0078ff;
      i{
        background-image: url("~@/assets/img/login/icon01.png");
      }
    }
    span{
      font-size: 16px;
      color:#b5d8ff;
      position: relative;
      padding-left: 17px;
      cursor: pointer;
      padding-bottom: 6px;
      &:hover{
        border-bottom: 2px solid #0078ff;
        color:#0078ff;
        i{
           background-image: url("~@/assets/img/login/icon01.png");
        }
      }

      i{
        content: "";
        position: absolute;
        width: 12px;
        height: 16px;
        left: 0;
        top: 4px;
        background-image: url("~@/assets/img/login/icon03.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
      }

    }
    &:nth-child(2){
        .bgImgSet{
          i{
            background-image: url("~@/assets/img/login/icon02.png");
          }
        }
        span{
          i{
            background-image: url("~@/assets/img/login/icon04.png");
          }
          &:hover{
            i{
              background-image: url("~@/assets/img/login/icon02.png");
            }
          }
        }
      }
  }
}
.vcode-btns{
    width: 100%;
    height: 47px;
    border-radius: 4px;
    background-color: #7ecc4c;
    border-color:transparent;
    // margin-top: 15px;
    // margin-bottom: 25px;
    span{
      font-size: 20px;
    }
}
.phone{
  /deep/.ivu-input-prefix {
    i{
      line-height: 47px;
    }
  }
}
.app-download1{top: 6% !important;}
.app-download {
  position: absolute;
  top: 26px;
  right: 60px;
  cursor: pointer;

  img {
    width: 80%;
    height: 80%;
  }
}

.code-style {
  // width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: center;

  div:first-child {
    margin-right: 30px;
  }
}
.verInput{
  width: 100%;
  position: relative;
  .append{
      position: absolute;
      right: 13px;
      top:10px;
      color: #0893fd;
      cursor: pointer;
      font-size: 16px;
      
  }

}
.sumitBtn{
  border:none; 
  background:#0078ff;
  width:100%;
  height:45px;
  line-height:35px;
  padding:0;
  z-index: 999;
}
.h2Title{
  position: relative;
  &:before{
   
    content: "";
    position: absolute;
    width: 435px;
    height: 4px;
    background-color: #07173d;
    left: -124px;
    bottom: -14px;
  }
}
.h2Title_login{
  position: relative;
  &:before{
   
    content: "";
    position: absolute;
    width: 458px;
    height: 4px;
    background-color: #07173d;
    left: -115px;
    bottom: -23px;
  }
}
.login-wrap {
  .canvasWrapper {
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;

    #canvas {
      position: absolute;
      z-index: 46;
      left: 0;
      top: 0;
      z-index: 3;
    }
  }

  /deep/ .login_body {
    overflow: hidden;
    margin-top: -2px;
    height: 100%;
    background-image: url("~@/assets/img/login/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    .link-item{
      padding:5px;
    }
    .validateCodeWrap {
      width: 100%;

      .validateCode {
        display: inline-block;
        vertical-align: middle;
        min-width: 100px;
        height: 45px;
        margin-left: 10px;

        img {
          cursor: pointer;
          height: 97%;
          position: relative;
          top: 1.5%;
        }
      }
    }

    .login_form {
      z-index: 999;
      border-radius: 7px;
      // background: white;
      width: 1300px;
      height: 700px;
      .left,
      .right {
        display: flex;
        align-items: center;
      }
      .login_form_bg {
        background-image: url("~@/assets/img/login/formbg1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        padding: 20px 0;
        height: 100%;
        position:relative;
        /deep/ .ivu-input-wrapper {
          .ivu-input {
            color: #0893fd;
            border: 1px solid #0e2351;
            background-color: #021339;
          }

          /deep/ input::placeholder {
            color: #0893fd !important;
            // font-weight: bold;
          }

          .ivu-icon {
            color: #0893fd !important;
          }

          input:-webkit-autofill {
            -webkit-text-fill-color: #0893fd;
            transition: background-color 5000s ease-in-out 0s;
          }
        }

        .getPassword {
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #0893fd;
          margin: 15px 0;

          span {
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
          }

          span:hover {
            text-decoration: underline;
          }
        }

        .ivu-btn > span {
          font-size: 20px !important;
        }
      }

      .animeWrapper {
        //   position: relative;
        width: 872px;
        height: 531px;
        overflow: hidden;
        transition: all 1s;
        .bg-img-left {
          width: 100%;
          height: 100%;
          background-size: contain;
          background-repeat: no-repeat;
        }
        .anime {
          position: absolute;
          left: 0;
          top: 0px;
          right: 30px;
          bottom: 0;
          margin: auto;
          width: auto;
          height: 400px;
          z-index: 2;
        }

        .anime1 {
          animation: anticlockwise 10s linear infinite;
        }

        .anime2 {
          animation: clockwise 10s linear infinite;
        }

        .anime3 {
          animation: anticlockwise 10s linear infinite;
        }

        .anime4 {
          animation: anticlockwise 10s linear infinite;
        }

        .anime5 {
          animation: clockwise 10s linear infinite;
        }

        .anime7 {
          height: 500px;
          top: 100px;
          left: -75px;
        }
      }

      .formRow {
        margin:0 0 10px 0;
        width: 380px;
        flex-wrap: nowrap;

        img {
          margin: 0 10px;
          cursor: pointer;
        }

        .ivu-btn > span {
          font-size: 30px !important;
        }

        .text {
          font-size: 14px;
          color: #b7b7b7;
        }
      }
    }

    .ivu-input {
      border-radius: 0px;
    }

    .ivu-input-large {
      height: 45px;
    }
  }

  @keyframes clockwise {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes anticlockwise {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0deg);
    }
  }
}
.login-form {
  width:100%;
  height: 400px;
}
.register-form {
  height: auto;
  width:100%;
  margin-top: 11%;
}
/*公共样式有，但是层级不够*/
.bold500{font-weight:500 !important;}
.color-fff{color:#fff !important;}
.fs20{font-size: 20px !important;}
</style>
